<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown智能排版 - 本地测试</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .header {
            text-align: center;
            padding: 20px 0;
            border-bottom: 2px solid #0078d4;
            margin-bottom: 30px;
        }
        .test-section {
            margin: 30px 0;
            padding: 20px;
            border: 1px solid #edebe9;
            border-radius: 8px;
            background-color: #faf9f8;
        }
        .test-result {
            background-color: #deecf9;
            padding: 15px;
            border-radius: 4px;
            margin-top: 15px;
        }
        button {
            background-color: #0078d4;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #106ebe;
        }
        textarea {
            width: 100%;
            height: 150px;
            padding: 10px;
            border: 1px solid #8a8886;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            resize: vertical;
        }
        .alert {
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .alert-info {
            background-color: #deecf9;
            border: 1px solid #0078d4;
            color: #0078d4;
        }
        .alert-warning {
            background-color: #fff4ce;
            border: 1px solid #f7b900;
            color: #797673;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Markdown智能排版 - 本地测试页面</h1>
        <p>此页面用于测试解析功能，不需要Word环境</p>
    </div>

    <div class="alert alert-warning">
        <strong>注意：</strong> 这是一个测试页面，用于验证Markdown解析和样式规则解析功能。要在Word中使用，请按照README.md中的说明进行部署。
    </div>

    <div class="test-section">
        <h2>1. Markdown解析测试</h2>
        <p>在下面输入Markdown内容，点击"解析Markdown"按钮查看解析结果：</p>
        <textarea id="markdownTest" placeholder="请输入Markdown内容进行测试...
例如：
# 这是一级标题
## 这是二级标题
这是普通段落。

**加粗文本** 和 *斜体文本* 示例。"># 这是一级标题
## 这是二级标题
这是普通段落文本。

**这是加粗文本** 和 *这是斜体文本* 示例。</textarea>
        <button onclick="testMarkdownParsing()">解析Markdown</button>
        <div id="markdownResult" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-section">
        <h2>2. 样式规则解析测试</h2>
        <p>在下面输入样式规则，点击"解析样式规则"按钮查看解析结果：</p>
        <textarea id="styleTest" placeholder="请输入样式规则进行测试...">[默认设置]
字体名称: 宋体
字体大小: 小四号
行距: 1.5
段前间距: 0pt
段后间距: 6pt

[标题一]
基于: 默认设置
字体名称: 黑体
字体大小: 小一号
加粗: 是
对齐方式: 居中</textarea>
        <button onclick="testStyleParsing()">解析样式规则</button>
        <div id="styleResult" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-section">
        <h2>3. 单位转换测试</h2>
        <p>测试各种单位转换功能：</p>
        <button onclick="testUnitConversion()">测试单位转换</button>
        <div id="unitResult" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-section">
        <h2>4. 完整流程测试</h2>
        <p>测试完整的处理流程（除了Word插入部分）：</p>
        <button onclick="testCompleteFlow()">完整流程测试</button>
        <div id="completeResult" class="test-result" style="display: none;"></div>
    </div>

    <div class="alert alert-info">
        <strong>提示：</strong> 
        <ul>
            <li>本测试页面仅验证解析逻辑，不会实际插入到Word文档</li>
            <li>所有测试结果都会在浏览器控制台中显示详细信息</li>
            <li>如需在Word中测试，请使用taskpane.html页面</li>
        </ul>
    </div>

    <!-- 加载工具函数和核心逻辑 -->
    <script src="utils.js"></script>
    <script>
        // 从taskpane.js中提取的核心解析函数（简化版，用于测试）
        
        function parseStyleRules(rulesText) {
            const rules = {};
            const sections = rulesText.split(/\[([^\]]+)\]/);
            
            for (let i = 1; i < sections.length; i += 2) {
                const sectionName = sections[i].trim();
                const sectionContent = sections[i + 1];
                
                if (sectionContent) {
                    rules[sectionName] = parseSectionProperties(sectionContent);
                }
            }

            // 处理继承关系
            for (const [sectionName, sectionRule] of Object.entries(rules)) {
                if (sectionRule['基于']) {
                    const baseName = sectionRule['基于'];
                    if (rules[baseName]) {
                        rules[sectionName] = { ...rules[baseName], ...sectionRule };
                    }
                }
            }

            return rules;
        }

        function parseSectionProperties(content) {
            const properties = {};
            const lines = content.split('\n');
            
            for (const line of lines) {
                const trimmedLine = line.trim();
                if (trimmedLine && !trimmedLine.startsWith('#')) {
                    const colonIndex = trimmedLine.indexOf(':');
                    if (colonIndex > 0) {
                        const key = trimmedLine.substring(0, colonIndex).trim();
                        const value = trimmedLine.substring(colonIndex + 1).trim();
                        properties[key] = value;
                    }
                }
            }
            
            return properties;
        }

        function parseMarkdown(markdown) {
            const lines = markdown.split('\n');
            const elements = [];
            
            for (let i = 0; i < lines.length; i++) {
                const line = lines[i];
                const trimmedLine = line.trim();
                
                if (!trimmedLine) continue;
                
                // 解析标题
                if (trimmedLine.startsWith('#')) {
                    const level = (trimmedLine.match(/^#+/) || [''])[0].length;
                    const text = trimmedLine.replace(/^#+\s*/, '');
                    
                    let type;
                    switch (level) {
                        case 1: type = '标题一'; break;
                        case 2: type = '标题二'; break;
                        case 3: type = '标题三'; break;
                        default: type = '标题三'; break;
                    }
                    
                    elements.push({
                        type: type,
                        text: text,
                        formatting: parseInlineFormatting(text)
                    });
                } else {
                    // 普通段落
                    elements.push({
                        type: '正文',
                        text: trimmedLine,
                        formatting: parseInlineFormatting(trimmedLine)
                    });
                }
            }
            
            return elements;
        }

        function parseInlineFormatting(text) {
            const segments = [];
            
            // 简单处理加粗和斜体
            const boldRegex = /\*\*([^*]+)\*\*/g;
            const italicRegex = /\*([^*]+)\*/g;
            
            let processedText = text;
            let lastIndex = 0;
            let match;
            
            // 处理加粗
            while ((match = boldRegex.exec(text)) !== null) {
                if (match.index > lastIndex) {
                    const beforeText = text.substring(lastIndex, match.index);
                    if (beforeText) {
                        segments.push({ text: beforeText, bold: false, italic: false });
                    }
                }
                
                segments.push({ text: match[1], bold: true, italic: false });
                lastIndex = match.index + match[0].length;
            }
            
            if (lastIndex < text.length) {
                const remainingText = text.substring(lastIndex);
                if (remainingText) {
                    segments.push({ text: remainingText, bold: false, italic: false });
                }
            }
            
            if (segments.length === 0) {
                segments.push({ text: text, bold: false, italic: false });
            }
            
            return segments;
        }

        // 测试函数
        function testMarkdownParsing() {
            const input = document.getElementById('markdownTest').value;
            const result = parseMarkdown(input);
            
            document.getElementById('markdownResult').style.display = 'block';
            document.getElementById('markdownResult').innerHTML = `
                <h4>解析结果:</h4>
                <pre>${JSON.stringify(result, null, 2)}</pre>
            `;
            
            console.log('Markdown解析结果:', result);
        }

        function testStyleParsing() {
            const input = document.getElementById('styleTest').value;
            const result = parseStyleRules(input);
            
            document.getElementById('styleResult').style.display = 'block';
            document.getElementById('styleResult').innerHTML = `
                <h4>解析结果:</h4>
                <pre>${JSON.stringify(result, null, 2)}</pre>
            `;
            
            console.log('样式规则解析结果:', result);
        }

        function testUnitConversion() {
            const tests = [
                { func: 'convertFontSize', inputs: ['小四号', '12pt', '16px'] },
                { func: 'convertIndent', inputs: ['2字符', '24pt', '1cm'] },
                { func: 'convertSpacing', inputs: ['1行', '12pt', '0.5cm'] },
                { func: 'convertLineSpacing', inputs: ['1.5倍', '18pt'] },
                { func: 'convertAlignment', inputs: ['居中', '左对齐', '两端对齐'] }
            ];

            let results = '<h4>单位转换测试结果:</h4>';
            
            tests.forEach(test => {
                results += `<h5>${test.func}:</h5><ul>`;
                test.inputs.forEach(input => {
                    let result;
                    switch (test.func) {
                        case 'convertFontSize':
                            result = UnitConverter.convertFontSize(input);
                            break;
                        case 'convertIndent':
                            result = UnitConverter.convertIndent(input, 12);
                            break;
                        case 'convertSpacing':
                            result = UnitConverter.convertSpacing(input, 12);
                            break;
                        case 'convertLineSpacing':
                            result = UnitConverter.convertLineSpacing(input);
                            break;
                        case 'convertAlignment':
                            result = StyleUtils.convertAlignment(input);
                            break;
                    }
                    results += `<li>${input} → ${result}</li>`;
                });
                results += '</ul>';
            });

            document.getElementById('unitResult').style.display = 'block';
            document.getElementById('unitResult').innerHTML = results;
        }

        function testCompleteFlow() {
            const markdownInput = `# 主标题
## 副标题
这是一个包含 **加粗文本** 和 *斜体文本* 的段落。

这是另一个普通段落。`;

            const styleRulesInput = `[默认设置]
字体名称: 宋体
字体大小: 小四号
行距: 1.5

[标题一]
基于: 默认设置
字体大小: 小一号
加粗: 是
对齐方式: 居中

[标题二]
基于: 默认设置
字体大小: 三号
加粗: 是

[正文]
基于: 默认设置
首行缩进: 2字符
对齐方式: 两端对齐`;

            try {
                const styleRules = parseStyleRules(styleRulesInput);
                const markdownElements = parseMarkdown(markdownInput);
                
                let results = '<h4>完整流程测试结果:</h4>';
                results += '<h5>解析的样式规则:</h5>';
                results += `<pre>${JSON.stringify(styleRules, null, 2)}</pre>`;
                results += '<h5>解析的Markdown元素:</h5>';
                results += `<pre>${JSON.stringify(markdownElements, null, 2)}</pre>`;
                
                results += '<h5>应用样式的模拟结果:</h5><ul>';
                markdownElements.forEach((element, index) => {
                    const rule = styleRules[element.type] || styleRules['正文'] || {};
                    results += `<li><strong>${element.type}</strong>: "${element.text}"`;
                    if (Object.keys(rule).length > 0) {
                        results += `<br>应用样式: ${JSON.stringify(rule)}`;
                    }
                    results += '</li>';
                });
                results += '</ul>';

                document.getElementById('completeResult').style.display = 'block';
                document.getElementById('completeResult').innerHTML = results;
                
                console.log('完整流程测试 - 样式规则:', styleRules);
                console.log('完整流程测试 - Markdown元素:', markdownElements);
                
            } catch (error) {
                document.getElementById('completeResult').style.display = 'block';
                document.getElementById('completeResult').innerHTML = `
                    <h4>测试失败:</h4>
                    <p style="color: red;">${error.message}</p>
                `;
                console.error('完整流程测试失败:', error);
            }
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('测试页面已加载，可以开始测试各项功能');
            
            // 启用调试模式
            if (typeof DebugUtils !== 'undefined') {
                DebugUtils.setDebugMode(true);
                DebugUtils.log('调试模式已启用');
            }
        });
    </script>
</body>
</html>
